<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我最帅</title>
		<link rel="stylesheet" href="css/cs.css" />
		<style type="text/css"></style>
		<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
		<style>
			.a {
				width: 100px;
				height: 100px;
				background: blueviolet;
				/*position: absolute;*/
			}
			.font{font-size: 20px;}
			.bg-color{background: dodgerblue;}
			.border{border: solid 2px sandybrown;}
		</style>
		<style>
			.a{}
			.e{}
		</style>
	</head>

	<body style="margin: 0;padding: 0;">
		<!--<ul style="width: 1000px;height: 40px;margin: auto;">
			<li>首页</li>
			<li>个人中心</li>
			<li>历史记录</li>
			<li>佳作分享</li>
			<li>小编炸了</li>
		</ul>-->
		
		<!--<div class="a">5825</div>
		<script>
			$(document).ready(function(){
				$("input").click(function(){
					$(".a").animate({
						left:'100px',
						width:'180px',
						height:'200px',
					},2000)
				})
			})
			$(document).ready(function(){
				$(".a").css('color','red')
			})
			
		</script>-->
		<!--<ul style="width: 1000px;height: 40px;margin: auto;display: none;">
			<li>首页</li>
			<li>个人中心</li>
			<li>历史记录</li>
			<li>佳作分享</li>
			<li>小编炸了</li>
		</ul>
		<script>
			$(document).ready(function(){
				$("li").click(function(){
					$("li").fadeIn({
						width:'180px',
						height:'40px',
					})
				})
			})
		</script>-->
		<!--
        	作者：chao814343181@126.com
        	时间：2016-11-10
        	描述：动画效果
        -->
		<!--<input type="button" name="" id="" value="按钮" />
		<div class="a"></div>
		<script>
			$(document).ready(function(){
				$("input").click(function(){
					var div=$("div");
					div.animate({
						height:'300px',
						opacity:'0.4'
					})
					div.animate({
						width:'300px',
						opacity:'0.9'
					})
					div.animate({
						height:'100px',
						opacity:'0.4'
					})
					div.animate({
						width:'100px',
						opacity:'0.9'
					})
				})
			})
		</script>-->
		<!--
        	作者：chao814343181@126.com
        	时间：2016-11-10
        	描述：轮播图
        -->
		<!--<div class="box">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" style="display: none;" />
			<img src="img/3.png" style="display: none;" />
			<a></a>
			<a style="left: 290px;"></a>
			<a style="left: 320px;"></a>
		</div>
		<script>
			$(document).ready(function(){
				$("a").mousemove(function(){
					var jiushiwo=$("a").index(this);
					$("img").hide();
					$("img").eq(jiushiwo).show()
				})
			})
		</script>-->
		<!--
        	作者：chao814343181@126.com
        	时间：2016-11-10
        	描述：暂停
        -->
		<!--<button class="a">开始</button>
		<button class="e">暂停</button>
		<div class=" box1"></div>
		<script>
			$(document).ready(function(){
				$(".a").click(function(){
					
				})
			})
		</script>-->
		<!--
        	作者：chao814343181@126.com
        	时间：2016-11-10
        	描述：屏幕滚动
        -->
		<!--<div class="gundongbox">
			<div class="gundongbox1">
				<div class=" gundongbox3" style="background: brown;">1</div>
				<div class=" gundongbox3">2</div>
				<div class=" gundongbox3" style="background: brown;">3</div>
				<div class=" gundongbox3">4</div>
			</div>
		</div>
		<script>
			$(document).ready(function m(){
				$(".gundongbox1").animate({
					left:-400
				},2000,"linear",function(){
					$(".gundongbox1").css({
						left:0
					})
					setTimeout(m,0)
				})
			})
			m()
		</script>-->
		<!--
        	作者：chao814343181@126.com
        	时间：2016-11-10
        	描述：连接多个链接
        -->
        <!--<input type="button" name="" id="" value="按我" />
        <div class="lianjiebox">你说啥</div>
        <script>
        	$(document).ready(function(){
        		$("input").click(function(){
        			$(".lianjiebox").hide(function(){})
        			$(".lianjiebox").show()
        		})
        	})
        </script>-->
        <!--
        	作者：chao814343181@126.com
        	时间：2016-11-10
        	描述：按我变色
        -->
        <!--<input type="button" name="" id="" value="按我变色" />
        <div class="biansebox">我变变变</div>
        <script>
        	$(document).ready(function(){
        		$("input").click(function(){
        			$(".biansebox").css('color','#8A2BE2')
        			
        		})
        	})
        </script>-->
        <!--
        	作者：chao814343181@126.com
        	时间：2016-11-10
        	描述：自动轮播 图
        -->
        <!--<div class="zidongbox">
        	<div class="zidong">
        		<img style="background-color: red;" />
        		<img style="background-color: blue;" />
        		<img style="background-color: green;" />
        		<img style="background-color: red;" />
        	</div>
        </div>
        <input type="button" name="" id="" value="1" />
        <input type="button" name="" id="" value="2" />
        <input type="button" name="" id="" value="3" />
        <script>
		var n=0
		function run(){
			if(n<3){n++}else{
			n=1;
			$(".zidong").css({left:0})	
			}
			$(".zidong").stop(true,true).animate({left:-100*n},500)
		}
		var q = setInterval(run,2000)
		$("input").click(
			function(){
				clearInterval(q)//点按钮停止之前的定时器
				n=$("input").index(this)
				$(".zidong").stop(true,true).animate({left:-100*n},500)
				setTimeout(function(){//点按钮后4秒中后重新定时
					clearInterval(q)//避免连续点击按钮重复定时
					q = setInterval(run,2000)
				},4000)//4秒	
			}
		)
	</script>-->
	<!--
    	作者：chao814343181@126.com
    	时间：2016-11-11
    	描述：选择器
    -->
    <!--<input type="button" name="" id="" value="按钮" />
    <input type="button" name="" id="" value="按钮1" />
    <input type="button" name="" id="" value="按钮2" />
	<script>
		$(document).ready(function(){
			$("input").click(function(){
				$("input:eq(1)").hide(function(){})
				$("input:eq(1)").show()
			})
		})
	</script>-->
	<!--
    	作者：chao814343181@126.com
    	时间：2016-11-11
    	描述：捕捉
    -->
    <!--<input type="" name="" id="" value="帅不过三秒" />
    <input type="button" name="" id="" value="提交" />
    <script>
    	$(document).ready(function(){
    		$("input:eq(1)").click(function(){
    			document.title=$("input:eq(0)").val()
    		})
    	})
    </script>-->
    <!--
    	作者：chao814343181@126.com
    	时间：2016-11-11
    	描述：添加删除
    -->
    <!--<div style="width: 300px;height: 100px;border: solid 2px red;">
    	<a href="#">链接</a>
    </div>
    <script>
//  	$("div").remove()
		$("div").append("啥")
    </script>
    -->
    <!--
    	作者：chao814343181@126.com
    	时间：2016-11-15
    	描述：CSS操作
    -->
    <div class="a bg-color font">fjeila</div>
    <div class="a">aha</div>
    <script>
    	$(".a").addClass('border')
    	$(".a").removeClass("bg-color")
    	$(".a").toggleClass("bg-color border")
    </script>
	</body>

</html>